<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <page-tools :show-before="true">
            <span slot="before">共有{{ list.length }}条角色权限点</span>
            <el-button slot="after" type="primary" @click="addFn(1, '0')">添加权限</el-button>
          </page-tools>
        </div>
        <el-table
          :data="list"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
        >
          <el-table-column prop="name" label="权限菜单" width="360" />
          <el-table-column prop="code" label="权限标识" width="360" />
          <el-table-column prop="description" label="描述" width="360" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button v-show="row.type === 1? true: false" type="text" @click="addFn(2, row.id)">添加</el-button>
              <el-button type="text" @click="setFn(row.type, row.pid, row.id)">编辑</el-button>
              <el-button type="text" @click="removeFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <loding ref="looding" :visible.sync="isShow" :title="title" :list="list" />
      </el-card>
    </div>
  </div>
</template>

<script>
import { permissionAPI, DelpermissionAPI } from '@/api/permission'
import { tranlistTotreeData } from '@/utils'
import loding from './loding.vue'
export default {
  components: {
    loding
  },
  data() {
    return {
      list: [], // 权限点数组
      isShow: false,
      title: ''
    }
  },
  mounted() { // 钩子
    this.getpermissionFn()
    this.$bus.$on('londing', () => {
      this.getpermissionFn()
    })
  },
  methods: {
    async getpermissionFn() { // 获取权限点方法
      // 树形数据方法
      // console.log(res)
      this.list = tranlistTotreeData(await permissionAPI(), '0')
    },
    async removeFn(id) { // 删除权限点方法
      await DelpermissionAPI(id)
      this.$message.success('删除权限成功')
      // 前端数据回调
      this.getpermissionFn()
    },
    addFn(type, pid) { // 添加权限的方法
      this.isShow = true
      this.title = '添加权限'
      this.$refs.looding.form.type = type
      this.$refs.looding.form.pid = pid
    },
    setFn(type, pid, id) {
      this.isShow = true
      this.title = '编辑权限'
      this.$refs.looding.getpermissionFn(id)
    }
  }
}
</script>

<style>
</style>
